/*
 * @Descripttion: 
 * @version: 
 * @Author: zhusn-b
 * @Date: 2019-08-12 14:17:08
 * @LastEditors: zhusn-b
 * @LastEditTime: 2020-09-17 23:16:56
 */
/*
 * @Descripttion: main css
 * @version: 0.1.0
 * @Author: zhusn-b
 * @Date: 2019-08-12 14:17:08
 * @LastEditors: zhusn-b
 * @LastEditTime: 2019-08-29 18:29:43
 */
$second: .2s;
$delay-time: .15s;
$activeBg: #3C689C;
.site-frame{
  width: 100%;
  height: 100%;
  min-width: 1200px;
  max-width: 1920px;
  // overflow-x: hidden;
  .site-frame-commonComponents{
    // height: 100%;
    .site-frame-main{
      @include display-flex();
      height: calc(100% - 50px);
      .site-sidebar{
        height: 100%;
        z-index: 1;
        .site-sidebar-bar{
          width: 160px;
          height: 100%;
          transition: width $second ease-in-out;
          -webkit-transition: width $second ease-in-out;
          -moz-transition: width $second ease-in-out;
          font-size: 14px;
          .sidebar-menu{
            width: 100%;
            .side-menu-list{
              white-space: nowrap;
              &.bg-hover:hover{
                cursor: pointer;
              }
              padding-left: 10px;
              height: 36px;
              @include display-flex();
              @include align-items(center);
              .menu-i{
                // height: 20px;
                // width: 20px;
                &.collapse-icon{
                  font-size: 18px;
                  cursor: pointer;
                  transition: transform $second ease-in-out,
                  -webkit-transform $second ease-in-out;
                  -webkit-transition: transform $second ease-in-out,
                  -webkit-transform $second ease-in-out;
                  -moz-transition: transform $second ease-in-out,
                  -webkit-transform $second ease-in-out;
                }
              }
              .svg{
                height: 100%;
                margin-right: 12px;
                @include display-flex();
                @include align-items(center);
                @include justify-content(center);
              }
              .icon-svg{
                width: 15px;
                height: 15px;
              }
            }
          }
          .sidebar-item{
            .sidebar-item-menuName{
              width: auto;
              overflow: hidden;
              opacity: 1;
              transition: width $second ease-in-out $delay-time;
              -webkit-transition: width $second ease-in-out $delay-time;
              -moz-transition: width $second ease-in-out $delay-time;
              transition: opacity $second ease-in-out $delay-time;
              -webkit-transition: opacity $second ease-in-out $delay-time;
              -moz-transition: opacity $second ease-in-out $delay-time;
            }
            &.split-level{
              padding-left: 0;
              .split-line{
                @include flex(1, 1, auto);
                height: 1px;
              }
              span{
                margin-left: 0;
                font-size: 12px;
              }
            }
          }
          .sidebar-bar-main{
            height: calc(100% - 224px);
            overflow: auto;
          }
        }
      }
      &.isCollapse{
        .site-sidebar-bar{
          width: 40px;
          overflow: hidden;
          .sidebar-item{
            .collapse-icon{
              transform: rotate(-180deg);
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
            }
            .sidebar-item-menuName{
              opacity: 0;
              width: 0px;
            }
            .split-line{
              &.mr5{
                margin-right: 0;
              }
            }
            .collapse-line{
              display: none;
            }
          }

        }
      }
      .site-frame-content{
        position: relative;
        @include flex(1, 1, auto);
        .el-loading-mask{
          background: transparent;
        }
        .main-content{
          // @include display-flex();
          // @include flex-direction-column();
        }
      }
    }
  }
}
.headBar {
  position: relative;
  height: 80px;
  width: 100%;
  line-height: 120px;
  z-index: 1;
  .headerBar-content{
    height: 100%;
    padding-right: 28px;
    @include display-flex();
    @include align-items(center);
    img{
      height: 75px;
      width: 75px;
    }
    .header-nav{
      margin-left: 70px;
      @include display-flex();
      @include align-items(center);
      &.blue{
        li{
          &:after{
            background: #2568B5;
          }
          &.current{
            color: #2568B5;
          }
        }
      }
      li{
        position: relative;
        font-size: 20px;
        color: #282828;
        padding: 0 14px;
        cursor: pointer;
        &:after{
          position: absolute;
          content: '';
          bottom: 30px;
          margin-left: 50%;
          width: 0;
          height: 6px;
          left: 0;
          background: #EC1313;
          transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        }
        // &:hover{
        //   &:after{
        //     width: 100%;
        //     margin-left: 0;
        //   }
        // }
        &.current{
          color: #EC1313;
          &:after{
            width: 100%;
            margin-left: 0;
          }
        }
      }
    }
    .head-name{
      span:first-child{
        font-size: 20px;
        margin-left: 30px;
      }
      span:first-child+span{
        font-size: 18px;
        margin-left: 16px;
      }
      .tab{
        font-size: 14px;
        margin-left: 15px;
      }
    }
    .head-features{
      @include display-flex();
      @include align-items(center);
      @include justify-content(flex-end);
      height: 100%;
      .head-fun{
        @include display-flex();
        @include align-items(center);
        height: 100%;
      }
      span{
        font-size: 14px;
      }
      .avatar{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-left: 30px;
      }
    }
  }
}
.build-branch-content{
  width: 100%;
  @include display-flex();
}
.flex-space-around{
  @include justify-content(space-around);
}
.flex-space-between{
  @include display-flex();
  @include justify-content(space-between);
}
.flex-space-start{
  @include justify-content(flex-start);
}
.flex-space-center{
  @include justify-content(center);
}